<template>
  <div class="container">
    <!-- 标签页 -->
    <a-tabs class="setting-tab">
      <!-- 标签页内容 -->
      <!-- key	对应 activeKey  tab	选项卡头显示文字 -->
      <a-tab-pane key="role" tab="角色设置">
        <a-button type="primary" @click="visible = true" style="margin-bottom: 16px">新增角色</a-button>
        <!-- a-table有两个必要的选项 columns和dataSource
            columns 列信息
            dataSource 数据源 
            pagination: {onChage 是当分页器发生变化时出发}
        -->
          <a-table :columns="columns" :dataSource="list"
          :pagination="{
            current: pageParams.page,
            pageSize: pageParams.pagesize,
            total: pageParams.total,
            onChange: changePage
          }"
          >
          <!-- bodyCell	个性化单元格	v-slot:bodyCell="{text, record, index, column}" -->
          <!-- column: {title: '操作', dataIndex: 'operate'} -->
          <!-- record: Proxy{id: '604e2aeb488be61b90b68776', name: '系统管理员', description: '管理整合平台，可以操作企业所有功能'} 操作当前行的所有内容 -->
          <!-- text：undefined -->
          <!-- index：0 当前行索引 -->
          <template #bodyCell="{ column, record}">
            <a-space v-if="column.dataIndex === 'operate'">
              <a-button type="primary" @click="editDetailRole(record.id)">编辑</a-button>
              <a-button type="danger" @click="delRow(record.id)">删除</a-button>
            </a-space>
          </template>
        </a-table>
      </a-tab-pane>
      <!-- forceRender	被隐藏时是否渲染 DOM 结构	boolean类型 默认值false -->
      <a-tab-pane key="setting" tab="公司设置" force-render> 
      </a-tab-pane>
    </a-tabs>
  </div>

  <!-- 放置弹出层 -->
  <!-- cancel	点击遮罩层或右上角叉或取消按钮的回调	function(e)
      ok	点击确定回调	function(e) -->
  <a-modal :title="showTitle" @cancel="btnCancel" @ok="btnOk" ok-text="确认" cancel-text="取消" v-model:visible="visible">
    <!-- 表单 -->
    <a-form>
      <a-form-item v-bind="form.validateInfos.name">
        <a-input v-model:value="formData.name" placeholder="请输入角色名称"></a-input>
      </a-form-item>
      <a-form-item v-bind="form.validateInfos.description">
        <a-input v-model:value="formData.description" placeholder="请输入角色描述"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted, reactive, computed } from 'vue'
  import { getRoleList, addRole,getRoleDetail, updateRole,delRole } from '@/api/setting.js'
  import { Form, message, Modal } from 'ant-design-vue';
  const list = ref([])
  // 控制弹层
  const visible =ref(false)
  // 弹层绑定的输入框
  const formData = reactive({
    name: '',
    description: ''
  })

  // 编辑按钮
  const editDetailRole = async (id) => {
    // 有id 先弹出层
    visible.value = true
    // 获取后端传过来的数据
    const { name, description } = await getRoleDetail(id)
    // 打开编辑弹出框 数据回显
    formData.name = name
    formData.description = description
    // 使用id来区分是新增还是修改
    formData.id = id
  }

  // 删除按钮
  const delRow = (id) => {
    Modal.confirm({
      title: '提示',
      content: '确定要删除该数据吗？',
      async onOk() {
        await delRole(id)
        // 如果是一个页面的最后没有数据，删除后还需要请求这个页面数据
        // 解决方法
        list.value.length === 1 && pageParams.page-- // 当前页只有一条数据的时候 往前走一页
        getList()
        message.success('删除成功！')
      }
    })
  }
  // 修改弹层标题
  const showTitle = computed(()=> formData.id ? '更新角色' : '新增角色')

  // 弹层校验规则
  const rules = reactive({
    name:[{ required: true, message: '请输入角色名称' }],
    description:[{ required: true, message: '请输入角色描述' }]
  })

  // 利用ant-design-vue中Form的方法useForm
  const form = Form.useForm(formData, rules) // 得到的是form实例

  const btnOk = async () => {
    // 手动校验规则
    await form.validate() // Promise
    
    // 此时意味着校验通过 可以添加角色了
    // 通过formData中是否有id判断是新增角色还是编辑角色 只要编辑角色需要传id 是编辑就调用更新角色接口
    formData.id ? await updateRole(formData) : await addRole(formData)

    message.success(showTitle.value + '成功！')

    // 重置数据
    btnCancel()
    // 重新获取数据
    getList()
    // 关闭弹层
    visible.value = false
  }

  const btnCancel = () => {
    formData.id = null // 关闭后需要把formData的id清除
    form.resetFields() // 重置字段 重置数据 消除校验提示
  }
  
  // 不需要响应式
  const columns = [
  { title: '序号',
  customRender({ index }) {  // {index}为当前行的索引
    // 要和当前的分页数据进行集合
    // 1 -> 1  第一页第一个为1
    // 2 -> (页码 -1） * 每页条数 + 1   第二页第一个为6
    return (pageParams.page - 1) * pageParams.pagesize + index + 1
  }
  },
  { title: '角色名称', dataIndex: 'name' },
  { title: '描述', dataIndex: 'description' },
  { title: '操作', dataIndex: 'operate' }
]

  const pageParams = reactive({
    page: 1,
    pagesize: 5,
    total: 0
  })
  onMounted(()=> {
    getList()
  })
  
  // 获取角色列表
  const getList = async () => {
    const { rows, total } = await getRoleList()
    pageParams.total = total
    list.value = rows
  }

  // 页面切换事件
  const changePage = (page,pagesize) => {
    pageParams.page = page
    pageParams.pagesize = pagesize
    // 选完页后要重新获取数据
    getList()
  }

</script>

<style lang="less" scoped>
  .container {
    padding: 16px;
    .setting-tab {
      background-color: #fff;
      padding: 16px;
      height: calc(100vh - 93px);
    }
  }
</style>
